<template>
  <section class="home">
    <div class="my-container">
      <div class="top-wrapper">
        <Menu />
        <Carousel />
      </div>
      <div class="bottom-wrapper">
        <HomeLink />
        <HomeRecs />
      </div>
    </div>
  </section>
</template>

<script>
import Menu from './menu/menu'
import Carousel from './carousel/carousel'
import HomeRecs from './home-recs'
import HomeLink from './home-links'

export default {
  components: {
    HomeRecs,
    Menu,
    Carousel,
    HomeLink
  }
}
</script>

<style lang="stylus">
.home
  margin-bottom 42px
  .my-container
    .top-wrapper
      position relative
      display flex
      width 100%
      height 460px
      margin-bottom 14px
    .bottom-wrapper
      width 100%
      height 170px
      display flex
      margin-bottom 26px
      .links
        overflow hidden
        width 235px
        height 100%
        background-color #5f5750
        margin 0 14px 0 0
        padding 0
        list-style none
        display flex
        flex-wrap wrap
        .link-item
          width 76px
          height 82px
          text-align center
          position relative
          &:before
            position absolute
            content ''
            width 0
            height 66px
            border-left 1px solid rgba(255,255,255,0.05)
            left -1px
            top 8px
          &:after
            position absolute
            content ''
            width 66px
            height 0
            border-bottom 1px solid rgba(255,255,255,0.05)
            left 5px
            top 0
          .link
            color rgba(255,255,255,0.7)
            font-size 12px
            display: block
            width: 100%
            height: 100%
            &:hover
              color #fefefe
            .icon
              padding-top 20px
              margin-bottom 4px
              font-size 24px
              display block
      .recs
        margin 0
        padding 0
        list-style none
        display flex
        .rec-item
          margin-right 14px
          &:last-child
            margin-right 0
</style>
